<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">   
//            var ctx;
//            var TOP = 38;
//            var LEFT = 37;
//            var RIGHT = 39;
//            var BOTTOM = 40;
//            
//            var snake = {
//                px:0,
//                py:0,
//                speed:2,
//                parts:[{x:0, y:0},{x:0, y:1},{x:0, y:2}],
//                left:function(){
//                    this.px -= this.speed;  
//                },
//                right:function(){
//                    this.px += this.speed;  
//                },
//                top:function(){
//                    this.py -= this.speed;  
//                },
//                bottom:function(){
//                    this.py += this.speed;  
//                }
//            };
//            
//            var pressed_key = false;
//            function init(){
//                var keys;        
//                var snake_keydown;
//                var snake_keyup;
//                var canvas = document.getElementById("dimensional_grid");
//                canvas.focus();
//                
//                ctx = canvas.getContext("2d"); 
//                  
//                
//                keys = {
//                    pressed_key : false,
//                    current_pressed : "KEY_NAME"
//                };
//                snake_keydown = function(p){
//                    //console.log(p);
//                    switch(p.which){
//                        case TOP : 
//                            pressed_key=true
//                            break;
//                        case LEFT : 
//                            pressed_key=true
//                            break;
//                        case RIGHT : 
//                            pressed_key=true
//                            break;
//                        case BOTTOM : 
//                            pressed_key=true
//                            break;                       
//                    }
//                };
//                snake_keyup = function(p){
//                    //console.log(p);
//                    switch(p.which){
//                        case TOP : 
//                            keys.pressed_key = false;
//                            keys.current_pressed = "TOP";
//                            break;
//                        case LEFT : 
//                            keys.pressed_key = false;
//                            keys.current_pressed = "LEFT";
//                            break;
//                        case RIGHT : 
//                            keys.pressed_key = false;
//                            keys.current_pressed = "RIGHT";
//                            break;
//                        case BOTTOM : 
//                            keys.pressed_key = false;
//                            keys.current_pressed = "BOTTOM"; 
//                            break;
//                        
//                    }
//                };
//                canvas.addEventListener("keydown", snake_keydown, false);
//                canvas.addEventListener("keyup", snake_keyup, false);
//                setInterval(function(){
//                    update();
//                },100)
//            };
//
//            function snake_form(){
//                var parts = snake.parts;
//                for(var i = 0; i < 3; i++){
//                    ctx.strokeRect(parts[i].x * 10, parts[i].y * 10, 10, 10);
//                }
//            }
//            
//            function update(){
//                ctx.fillStyle = "#FF0000";
//                ctx.fillRect(0, 0, 400, 400); 
//                
//                ctx.fillStyle = "#000000";
//                
//                snake_form();
//                if(pressed_key){
//                    ctx.clearRect(0, 0, 500, 500);
//                    snake.bottom();
//                    for(var i = 0; i < 3; i++){
//                        ctx.strokeRect(parts[i].x  * 10, parts[i].y + snake.py * 10, 10, 10);
//                        //snake.bottom();
//                        //ctx.strokeRect(snake.px,snake.py * 10, 10, 10);
//                    } 
//                    
//                } 
//                
//            }
        </script>
    </head>
    <body onload="init();">
        <div>Two Dimensional Arrary</div>
        <canvas id="dimensional_grid" style="border: black solid 1px;" height="400" width="400">

        </canvas>
    </body>
</html>
